//生活服务模块lifeservice 话费
const serviceData = [
  { name: '话费', bgPosition: '-16px -15px' },
  { name: '机票', bgPosition: '-80px -15px' },
  { name: '电影票', bgPosition: '-141px -15px' },
  { name: '游戏', bgPosition: '-205px -15px' },
  { name: '彩票', bgPosition: '-16px -88px' },
  { name: '加油卡', bgPosition: '-77px -88px' },
  { name: '酒店', bgPosition: '-141px -88px' },
  { name: '火车票', bgPosition: '-205px -88px' },
  { name: '众筹', bgPosition: '-16px -158px' },
  { name: '理财', bgPosition: '-79px -158px' },
  { name: '礼品卡', bgPosition: '-141px -158px' },
  { name: '白条', bgPosition: '-205px -158px' }
]
function renderServices() {
  const serviceList = document.querySelector('.lifeservice .serviceList')
  serviceData.forEach((service, index) => {
    const li = document.createElement('li')
    if (index === 1) {
      li.innerHTML = `
            <a href="#">
                <i style="background-position: ${service.bgPosition}"></i>
                <p>${service.name}</p>
                <img src="images/dw1.png" alt="">
            </a>
        `
    } else {
      li.innerHTML = `
            <a href="#">
                <i style="background-position: ${service.bgPosition}"></i>
                <p>${service.name}</p>
            </a>
        `
    }
    serviceList.appendChild(li)
  })
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', renderServices)


//轮播图
const focusUrl = [
  '../upload/focus1.jpg',
  '../upload/focus2.jpg',
  '../upload/focus3.jpg',
  '../upload/focus4.jpg',
  '../upload/focus5.jpg',
  '../upload/focus6.jpg',
  '../upload/focus7.jpg',
]
const focusNext = document.querySelector('.focus .focus-next')
const focusPrev = document.querySelector('.focus .focus-prev')
const focus = document.querySelector('.focus')
const focusNav = document.querySelectorAll('.focus .focus-nav li')
function renderFocus() {
  let i = 0
  //右按钮
  focusNext.addEventListener('click', () => {
    i++
    i = i < focusUrl.length ? i : 0
    common()
  })
  //左按钮
  focusPrev.addEventListener('click', () => {
    i--
    i = i < 0 ? focusUrl.length - 1 : i
    common()
  })
  //公共部分
  function common() {
    focus.style.backgroundImage = `url(${focusUrl[i]})`
    document.querySelector('.focus .focus-nav .selected').classList.remove('selected')
    document.querySelector(`.focus .focus-nav li:nth-child(${i + 1})`).classList.add('selected')
  }
  //自动播放 往右
  let auto = setInterval(() => {
    focusNext.click()
  }, 3000)
  //鼠标经过停止
  focus.addEventListener('mouseenter', () => {
    clearInterval(auto)
  })
  //鼠标离开又自动播放
  focus.addEventListener('mouseleave', () => {
    clearInterval(auto)
    auto = setInterval(() => {
      focusNext.click()
    }, 3000)
  })
  //小点切换
  focusNav.forEach((items, index) => {
    items.addEventListener('click', () => {
      i = index
      common()
    })
  })
}
document.addEventListener('DOMContentLoaded', renderFocus)


//猜你喜欢部分渲染
const likeData = [
  {
    src: "./upload/images/like1_03.png",
    p: '阳光美包新款单肩包女<br>包时尚子母包四件套女',
    price: 116
  },
  {
    src: "./upload/images/like2_03.png",
    p: '爱仕达 30CM炒锅不粘<br>锅NWG8330E电磁炉炒',
    price: 99
  },
  {
    src: "./upload/images/like3_03.png",
    p: '捷波朗<br>（jabra）BOOSI劲步',
    price: 245
  },
  {
    src: "./upload/images/like4_03.png",
    p: '欧普<br>JYLZ08面板灯平板灯铝',
    price: 238
  },
  {
    src: "./upload/images/like5_03.png",
    p: '三星<br>（G5500）移动联',
    price: 649
  },
  {
    src: "./upload/images/like6_03.png",
    p: '韩国所望<br>紧致湿润精华露400ml',
    price: 649
  }
]
const like = document.querySelector('.like .like_bd ul')
function renderLike() {
  likeData.forEach(goods => {
    const li = document.createElement('li')
    li.innerHTML = `
      <a href="#">
        <img src=${goods.src} alt="">
        <p>${goods.p}</p>
        <i><span>&yen;</span>${goods.price.toFixed(2)}</i>
      </a>
    `
    like.appendChild(li)
  })
}
document.addEventListener('DOMContentLoaded', renderLike)


//楼层
//轮播图数据
const sliderData = [
  ['./upload/floor-1-b01.png', './upload/floor-1-b02.png', './upload/floor-1-b03.png'],
  ['./upload/floor-2-b01.png', './upload/floor-2-b02.png', './upload/floor-2-b03.png'],
  ['./upload/floor-3-b01.png', './upload/floor-3-b02.png', './upload/floor-3-b03.png']
]
//创建切换和轮播功能的函数
function createTabSwitch(containerClass, floorIndex) {
  const container = document.querySelector(`.${containerClass}`)
  const tabItems = container.querySelectorAll('.tab_list_item')
  const tabList = container.querySelector('.tab_list ul')
  const sliderContainer = container.querySelector('.col_329')
  const sliderImg = sliderContainer.querySelector('img')
  const sliderDots = sliderContainer.querySelectorAll('.slider li')
  const currentFloorSliderData = sliderData[floorIndex]

  //当前轮播图索引号
  let currentSliderIndex = 0
  //定时器ID
  let autoPlayTimer = null

  //tab栏切换
  tabList.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      container.querySelector('.tab_list ul .style_red').classList.remove('style_red')
      e.target.classList.add('style_red')
      const i = +e.target.dataset.id
      container.querySelector('.tab_content .active').classList.remove('active')
      tabItems[i].classList.add('active')
    }
  })

  //切换轮播图
  function switchSlider(targetIndex) {
    sliderImg.src = currentFloorSliderData[targetIndex]
    sliderDots.forEach(dot => dot.classList.remove('sliat'))
    sliderDots[targetIndex].classList.add('sliat')
    currentSliderIndex = targetIndex
  }

  //自动播放
  function startAutoPlay() {
    clearInterval(autoPlayTimer)
    autoPlayTimer = setInterval(() => {
      const nextSliderIndex = (currentSliderIndex + 1) % currentFloorSliderData.length
      switchSlider(nextSliderIndex)
    }, 3000)
  }

  //初始化轮播图 默认显示第一张
  switchSlider(0)
  startAutoPlay()

  //小圆点切换
  sliderDots.forEach((dot, dotIndex) => {
    dot.addEventListener('click', () => {
      switchSlider(dotIndex)
    })
  })

  //鼠标经过轮播停止
  sliderContainer.addEventListener('mouseenter', () => {
    clearInterval(autoPlayTimer)
  })
  //鼠标离开重新启动
  sliderContainer.addEventListener('mouseleave', () => {
    startAutoPlay()
  })
}

document.addEventListener('DOMContentLoaded', () => {
  createTabSwitch('eleapp', 0)
  createTabSwitch('phone', 1)
  createTabSwitch('computer', 2)
});


//电梯
(() => {
  const elevator = document.querySelector('.elevator')
  //页面滚动电梯显示
  window.addEventListener('scroll', () => {
    const n = document.documentElement.scrollTop
    elevator.style.opacity = n >= 350 ? 1 : 0
  })
  //点击顶部放回顶部
  const backTop = document.querySelector('#backTop')
  backTop.addEventListener('click', () => {
    window.scrollTo(0, 0)
  })
})();

(() => {
  //点击电梯跳转对应楼层
  const elevatorList = document.querySelector('.elevator_list')
  elevatorList.addEventListener('click', e => {
    if (e.target.tagName === 'A' && e.target.dataset.name) {
      const old = document.querySelector('.elevator_list .active')
      if (old) {
        old.classList.remove('active')
      }
      e.target.classList.add('active')
      const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
      document.documentElement.scrollTop = top
    }
  })
  //根据楼层选择内容
  window.addEventListener('scroll', () => {
    const old = document.querySelector('.elevator_list .active')
    if (old) {
      old.classList.remove('active')
    }
    const like = document.querySelector('.like')
    const blog = document.querySelector('.blog')
    const eleapp = document.querySelector('.eleapp')
    const phone = document.querySelector('.phone')
    const computer = document.querySelector('.computer')
    const popular = document.querySelector('.popular')
    const n = document.documentElement.scrollTop
    if (n >= like.offsetTop && n < blog.offsetTop) {
      document.querySelector('[data-name="like"]').classList.add('active')
    } else if (n >= blog.offsetTop && n < eleapp.offsetTop) {
      document.querySelector('[data-name="blog"]').classList.add('active')
    } else if (n >= eleapp.offsetTop && n < phone.offsetTop) {
      document.querySelector('[data-name="eleapp"]').classList.add('active')
    } else if (n >= phone.offsetTop && n < computer.offsetTop) {
      document.querySelector('[data-name="phone"]').classList.add('active')
    } else if (n >= computer.offsetTop && n < popular.offsetTop) {
      document.querySelector('[data-name="computer"]').classList.add('active')
    } else if (n >= popular.offsetTop) {
      document.querySelector('[data-name="popular"]').classList.add('active')
    }
  })
})();
